<!--
WebGL Water
http://madebyevan.com/webgl-water/

Copyright 2011 Evan Wallace
Released under the MIT license
-->

<!DOCTYPE html>
<html>

<head>
    <title>WebGL Water</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <script src="polyfill.js"></script>
    <script src="lightgl.js"></script>
    <script src="cubemap.js"></script>
    <script src="renderer.js"></script>
    <script src="water.js"></script>
    <script src="main.js"></script>
    <style type="text/css">
        body {
            font: 13px/140% Arial, sans-serif;
            background: black;
            color: white;
            overflow: hidden;
        }

        a {
            color: inherit;
            cursor: pointer;
        }

        img {
            display: none;
        }

        ul {
            padding: 0 0 0 20px;
        }

        h1 {
            font: bold italic 30px/30px Georgia;
            text-align: center;
        }

        h2 {
            font: bold italic 17px/17px Georgia;
            padding-top: 10px;
        }

        small {
            display: block;
            font-size: 11px;
            line-height: 15px;
        }

        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }

        #help {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 280px;
            padding-right: 20px;
            overflow: auto;
        }

        #loading {
            position: absolute;
            left: 0;
            top: 50%;
            right: 300px;
            text-align: center;
            margin-top: -8px;
        }

        @media (max-width: 600px) {
            small {
                font-size: 8px;
                line-height: 10px;
            }

            #help {
                width: 100px;
                font-size: 10px;
                line-height: 12px;
            }
        }
    </style>
</head>

<body>
    <div id="loading">Loading...</div>
    <div id="help">
        <!-- <h1>WebGL Water</h1>
        <p>Made by <a href="http://madebyevan.com/">Evan Wallace</a></p>
        <p>This demo requires a decent graphics card and up-to-date drivers. If you can't run the demo, you can still <a
                href="http://youtube.com/watch?v=R0O_9bp3EKQ">see it on YouTube</a>.</p>
        <h2>Interactions:</h2>
        <ul>
            <li>Draw on the water to make ripples</li>
            <li>Drag the background to rotate the camera</li>
            <li>Press SPACEBAR to pause and unpause</li>
            <li>Drag the sphere to move it around</li>
            <li>Press the L key to set the light direction</li>
            <li>Press the G key to toggle gravity</li>
        </ul>
        <h2>Features:</h2>
        <ul>
            <li>Raytraced reflections and refractions</li>
            <li>Analytic ambient occlusion</li>
            <li>Heightfield water simulation *</li>
            <li>Soft shadows</li>
            <li>Caustics (see <a
                    href="https://medium.com/@evanwallace/rendering-realtime-caustics-in-webgl-2a99a29a0b2c">this</a>
                for details) **</li>
        </ul>
        <p><small>* requires the OES_texture_float extension<br>** requires the OES_standard_derivatives
                extension</small></p>
        <p><small>Tile texture from <a href="http://www.flickr.com/photos/zooboing/3682834083/">zooboing</a> on
                Flickr</small></p> -->
    </div>
    <img id="tiles" src="./img/tiles.jpg">
    <img id="xneg" src="./img/xneg.jpg">
    <img id="xpos" src="./img/xpos.jpg">
    <img id="ypos" src="./img/ypos.jpg">
    <img id="zneg" src="./img/zneg.jpg">
    <img id="zpos" src="./img/zpos.jpg">
</body>

</html>
<script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
            m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-17521220-1', 'auto');
    ga('send', 'pageview');
</script>